<template>
    <div class="header">
        <input v-model="inputText" @keydown.enter="onKeyEnterDown" type="text" placeholder="请输入你的任务名称,按回车键确认">
    </div>
</template>

<script>
export default {
    name: "compHeader",
    data() {
        return {
            inputText: ""
        }
    },
    methods: {
        onKeyEnterDown() {
            let str = this.inputText.trim();
            if (!str) return alert("请输入内容");
            console.log(this.inputText);
            this.$store.commit("addItem", str);
            this.inputText = "";
        }
    }
}
</script>

<style scoped lang="scss">
.header {
    width: 100%;

    input {
        padding: 4px;
        width: 100%;
        border: 1px solid #1e90ff;
        border-radius: 4px;
    }
}
</style>